<template>
	<uni-drawer ref="dialogRef" mode="right" :mask-click="false" :width="350">
		<view class="p-2 text-base">
			<view class="flex justify-between">
				<view>
					<uni-title type="h3" title="烟花图"></uni-title>
				</view>
				<view>
					<button size="mini" @click="closeDrawer()">X</button>
				</view>
			</view>
			<scroll-view style="height:calc(100vh - 180px); width:330px" scroll-y="true" scroll-x="true">
				<div class="table-main">
					<div class="flex items-center">
						<div class="text-center p-2 font-bold">
							选
						</div>
						<div v-for="i in count_front" :key="i"
							@click="onChooseNum(i.toString().padStart(2, '0'), true)">
							<span
								:class="chooseNums[0].includes(i.toString().padStart(2, '0')) ? 'ball ball-8' : 'ball'">
								{{ i.toString().padStart(2, '0') }}
							</span>
						</div>
						<div v-for="i in count_back" :key="i"
							@click="onChooseNum(i.toString().padStart(2, '0'), false)">
							<span
								:class="chooseNums[1].includes(i.toString().padStart(2, '0')) ? 'ball ball-8' : 'ball'">
								{{ i.toString().padStart(2, '0') }}
							</span>
						</div>
					</div>
					<div v-for="(item, idx) of dataset" :key="idx" class="flex items-center">
						<div class="text-center p-2 font-bold">
							{{ item.lotteryDrawNum.slice(-2) }}
						</div>
						<div v-for="i in count_front" :key="i">
							<span :class="getBallClass(i.toString().padStart(2, '0'), item.lotteryDrawResult.split(' '))">
							{{ i.toString().padStart(2, '0') }}
							</span>
						</div>
						<div v-for="i in count_back" :key="i">
							<span :class="getBallClass(i.toString().padStart(2, '0'), item.lotteryDrawResult.split(' '), false)">
							{{ i.toString().padStart(2, '0') }}
							</span>
						</div>
					</div>
				</div>
			</scroll-view>
			<view class="flex justify-between mt-1">
				<view>
					<button size="mini" @click="onDelRecord()">删除（{{ orderIndex+' / '+orderList.length }}）</button>
					<button size="mini" @click="onPrevRecord()" class="mx-1">&lt;</button>
					<button size="mini" @click="onNextRecord()">&gt;</button>
				</view>
				<view>
					<button size="mini" @click="closeDrawer()">关闭</button>
				</view>
			</view>
			<view class="flex justify-between mt-1">
				<view>
					<button size="mini" @click="onFavRecord()">&hearts;</button>
					<button size="mini" @click="onClearFav()" class="mx-1">清空收藏</button>
					<button size="mini" @click="onCopyFav()()">复制收藏（{{favOrderList.length}}）</button>
				</view>
				<view>
				</view>
			</view>
		</view>
	</uni-drawer>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	import DltDataModel from '@/model/DltDataModel';
	import FsDriver from '@/model/FsDriver';
	import {
		copyText
	} from '@/utils/Utils';
	import {
		split_index,
		count_front,
		count_back
	} from '@/config/dlt-config';

	const fsDriver = new FsDriver();
	const dltDataModel = new DltDataModel();

	const dialogRef = ref(null);
	const visible = defineModel();

	const dataset = [...dltDataModel.getDataSource()];
	const statDrawal = dltDataModel.getDrawalStat(dataset);
	const chooseNums = ref([
		[],
		[]
	]);

	const orderList = ref([]);
	const orderIndex = ref(-1);
	const favOrderList = ref([]);

	const activeDrawInfo = ref({
		lotteryDrawNum: '',
		lotteryDrawResult: '',
		lotteryDrawTime: '',
	});

	watch(() => visible.value, () => {
		if (visible.value) {
			dialogRef.value.open();
			loadData();
		} else {
			dialogRef.value.close();
		}
	})

	const closeDrawer = () => {
		visible.value = false;
		dialogRef.value.close();
	}


	const getBallClass = (no, result, isFront = true) => {
		let idx = 0;
		if (isFront) {
			idx = result.indexOf(no) + 1;
			return (idx == 0 || idx > split_index) ? 'ball' : `ball ball-${idx}`;
		}
		idx = result.lastIndexOf(no) + 1;
		return (idx == 0 || idx <= split_index) ? 'ball' : `ball ball-${idx}`;
	}

	const getStatAllText = (no, isFront = true) => {
		let count = 0;
		if (statDrawal.statAll[isFront ? 0 : 1][no]) {
			count = statDrawal.statAll[isFront ? 0 : 1][no];
			if (count > 20) {
				return `<span class="ball border-white color-gray-600 font-500">${count}</span>`;
			} else if (count > 10) {
				return `<span class="ball border-white color-gray-500 font-400">${count}</span>`;
			} else if (count > 5) {
				return `<span class="ball border-white color-gray-400">${count}</span>`;
			} else {
				return `<span class="ball border-white color-gray-300">${count}</span>`;
			}
		}
		return '<span class="ball border-white color-gray-300">-</span>';
	}

	const onChooseNum = (num, isFront = true) => {
		let pos = isFront ? 0 : 1;
		if (chooseNums.value[pos].includes(num)) {
			chooseNums.value[pos].splice(chooseNums.value[pos].indexOf(num), 1);
		} else {
			let len = isFront ? split_index : (7 - split_index);
			if (chooseNums.value[pos].length < len) {
				chooseNums.value[pos].push(num);
			}
		}
		console.log('chooseNo', num, chooseNums.value[pos]);
	}

	const onPrevRecord = () => {
		orderIndex.value--;
		if (orderIndex.value < 0) {
			chooseNums.value = [
				[],
				[]
			];
			return;
		}
		let arr = orderList.value[orderIndex.value].split(' ');
		chooseNums.value = [arr.slice(0, split_index), arr.slice(split_index)];
	}
	const onNextRecord = () => {
		orderIndex.value++;
		if (orderIndex.value >= orderList.value.length) {
			orderIndex.value = orderList.value.length - 1;
		}
		let arr = orderList.value[orderIndex.value].split(' ');
		chooseNums.value = [arr.slice(0, split_index), arr.slice(split_index)];
	}
	const onDelRecord = () => {
		if (orderIndex.value < 0) {
			return;
		}
		uni.showModal({
			title: '提示',
			content: '确定要删除该记录吗？',
			success: function(res) {
				if (res.confirm) {
					orderList.value.splice(orderIndex.value, 1);
					orderIndex.value++;
					onNextRecord();
				}
			}
		});
	}
	const onFavRecord = () => {
		favOrderList.value.push(chooseNums.value.map(v => v.join(' ')).join(' '));
	}
	const onClearFav = () => {
		uni.showModal({
			title: '提示',
			content: '确定要清空收藏内容吗？',
			success: function(res) {
				if (res.confirm) {
					favOrderList.value = [];
				}
			}
		});
	}
	const onCopyFav = () => {
		copyText(favOrderList.value.join('\n'));
		uni.showToast({
			title: '复制成功',
			icon: 'success'
		})
	}
	const loadData = () => {
		let dataStr = fsDriver.get('temp-order');
		if (!dataStr) {
			uni.showToast({
				title: '没有暂存的选号数据',
				icon: 'error'
			})
			return;
		}
		orderList.value = JSON.parse(dataStr);
	}
</script>